<template>
  <div class="visual-chart" ref="chart"></div>
</template>

<script>
import { getLimitText } from '@/util'

export default {
  props: ['chartData'],
  mounted () {
    this.chart = this.echarts.init(this.$refs.chart)
    this.chart.setOption(this.getOption())
  },
  data () {
    return {
      chart: null,
      limit: 4
    }
  },
  destroyed () {
    console.log('555')
  },
  computed: {
    links () {
      const linkList = [
        ...this.chartData.prevNodeList.map(item => {
          return {
            source: getLimitText(item.prevNode.name, this.limit),
            target: getLimitText(this.chartData.name, this.limit),
            label: {
              show: true,
              formatter: () => item.relation.type,
              fontSize: 12
            }
          }
        }),
        ...this.chartData.backNodeList.map(item => {
          return {
            source: getLimitText(this.chartData.name, this.limit),
            target: getLimitText(item.backNode.name, this.limit),
            label: {
              show: true,
              formatter: () => item.relation.type,
              fontSize: 12
            }
          }
        })
      ]
      return linkList
    },
    nodes () {
      const nodeList = [
        { id: `${this.chartData.id}9527`, name: `${getLimitText(this.chartData.name, this.limit)}` }
      ]
      for (let i = 0; i < this.links.length; i++) {
        const link = this.links[i]
        const source = link.source
        const target = link.target
        if (source !== getLimitText(this.chartData.name, this.limit)) {
          nodeList.push({
            id: `${i}`,
            name: source
          })
          link.source = `${i}`
          link.target = `${this.chartData.id}9527`
        }
        if (target !== getLimitText(this.chartData.name, this.limit)) {
          nodeList.push({
            id: `${i}`,
            name: target
          })
          link.target = `${i}`
          link.source = `${this.chartData.id}9527`
        }
      }
      return nodeList
    }
  },
  methods: {
    getOption () {
      console.log(this.nodes)
      console.log(this.links)
      return {
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force',
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },
            draggable: true,
            force: {
              edgeLength: 200,
              gravity: 0.1,
              repulsion: 320
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: this.nodes,
            links: this.links,
            lineStyle: {
              opacity: 0.9,
              width: 1,
              curveness: 0
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.visual-chart
  width: 770px
  height: 500px
  background-color: #fafafa
  border-radius: 4px
</style>
